<template>
    <!-- 修改密码界面 -->
    <div>
        <el-form :model="formData" :rules="rules" ref="formDataRef" label-width="80px" @submit.prevent>
            <el-form-item label="旧密码" prop="oldPassword">
                <el-input clearable placeholder="请输入旧密码" v-model.trim="formData.oldPassword" show-password></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input clearable placeholder="请输入新密码" v-model.trim="formData.newPassword" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="rePassword">
                <el-input clearable placeholder="请再次输入新密码" v-model.trim="formData.rePassword" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="updatePassword">确认修改</el-button>
                <el-button type="primary" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const formData = ref({});
const formDataRef = ref();

const validatePass = (rule, value, callback) => {
    if (!proxy.Verify.checkPassword(value)) {
        callback(new Error("需要8位以上至少包含字母、数字或特殊字符中两种的密码"))
    }
    else {
        callback();
    }
}
const validateRePass = (rule, value, callback) => {
    if (value && value !== formData.value.newPassword) {
        callback(new Error("两次输入密码不一致"))
    }
    else {
        callback();
    }
}
const rules = {
    oldPassword: [
        { required: true, message: "请输入新密码" },
        { trigger: "blur", validator: validatePass, message: "需要8位以上至少包含字母、数字或特殊字符中两种的密码" }
    ],
    newPassword: [
        { required: true, message: "请输入新密码" },
        { trigger: "blur", validator: validatePass, message: "需要8位以上至少包含字母、数字或特殊字符中两种的密码" }
    ],
    rePassword: [
        { required: true, message: "请输入内容" },
        { trigger: "blur", validator: validateRePass, message: "两次输入密码不一致" }
    ],
};

const emit = defineEmits(['editBack'])

const updatePassword = () => {
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return;
        }
        // 确认修改
        proxy.Confirm({
            message: "修改密码后需要重新登陆，确认修改密码吗？",
            okFun: async () => {
                let params = {};
                Object.assign(params, formData.value);
                let result = await proxy.Request({
                    method: "put",
                    url: proxy.Api.updatePassword,
                    params: {
                        oldPassword: formData.value.oldPassword,
                        newPassword: formData.value.newPassword
                    }
                })
                if (!result) {
                    return;
                }
                proxy.Message.success("修改成功，请重新登录", () => {
                    myApi.reLogin();
                });
            }
        })
    });
}

const cancel = () => {
    emit('editBack')
}
</script>

<style lang="scss" scoped></style>
